import React, { useEffect, useState } from 'react'
import { Row, Col, Menu } from 'antd'
// 图表引入
import {
  HomeOutlined,
  YoutubeOutlined,
  InstagramOutlined
} from '@ant-design/icons'
import Router from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import serevicePath from '../config/apiUrl'


const Header = () => {
  const [navArray, setNavarray] = useState([])
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(serevicePath.getTypeInfo)
        .then((res) => {
          return res.data.data
        })
      setNavarray(result)
    }

    fetchData()
  }, [])
  const handelClick = (e) => {
    if (e.key == 0) {
      Router.push('/')
    } else {
      Router.push('/list?id=' + e.key)
    }
  }
  return (
    <div className="header">
      <Row type="flex" justify="center">
        <Col xs={24} sm={24} md={10} lg={10} xl={10}>
          <span className="header-logo">技术胖</span>
          <span className="header-txt">专注前端开发,每年100集免费视频。</span>
        </Col>
        <Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
          {/* 规定里面的Menu.Item是以什么方式排列 */}
          <Menu mode="horizontal" onClick={handelClick}>
            <Menu.Item key="0">
              <HomeOutlined />
              &nbsp;博客首页
            </Menu.Item>
            {
              navArray.map((item) => {
                let Item_icon = item.icon
                return (
                  <Menu.Item key={item.Id}>
                    {/* <YoutubeOutlined /> */}
                    {/* <Item_icon /> */}
                    {/* <div dangerouslySetInnerHTML={{ __html: item.icon }}></div> */}
                    {item.icon}
                    &nbsp;{item.typeName}
                    {/* 视频教程 */}
                  </Menu.Item>
                )
              })
            }

            {/* <Menu.Item key="life">
              <InstagramOutlined />
              &nbsp;快乐生活
            </Menu.Item> */}
          </Menu>
        </Col>
      </Row>
    </div>
  )
}

// Header.getInitialProps = async()=>{

// }

export default Header